/*
* @Author: wangliang
* @Date: 2018/4/10
* @description: 企业详情
*/
<template>
  <div class="cms-detail-box">
      <el-row  class="main-box">
        <el-col :span="24">
          <el-tabs v-model="tabIndex"  @tab-click="handleClick(tabIndex)">
            <el-tab-pane label="基本信息" :disabled="disAttr[0]">
              <div>
                <BasicInfo ref="basicInfo" @updateIdentification="getIdentification()" @basicTest="pass" @tabCon="tabCon"></BasicInfo>
              </div>
            </el-tab-pane>
            <el-tab-pane label="其他信息" :disabled="disAttr[1]">
              <div>
                <OtherInfo></OtherInfo>
              </div>
            </el-tab-pane>
            <el-tab-pane label="机构信息" :disabled="disAttr[2]">
              <div>
                  <MechanismInfo @OrgValidate="OrgValidate" ref="OrgInfo"></MechanismInfo>
              </div>
            </el-tab-pane>
            <el-tab-pane label="LP信息" :disabled="disAttr[3]">
              <div>
                  <LpInfo ref="lpInfo" @lpTest="lpTest"></LpInfo>
              </div>
            </el-tab-pane>
            <el-tab-pane label="基金信息" :disabled="disAttr[4]">
              <div>
                <FundInfo ref='fundInfo' @fundTest="fundTest"></FundInfo>
              </div>
            </el-tab-pane>
          </el-tabs>
          <div class="right-btn">
              <StatusBtn 
                  :infoStatus="infoStatus" 
                  @setState="setState" 
                  class="left-btn"/>
              <el-button type="primary" round @click="close">关闭</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component, Watch } from 'vue-property-decorator';
import BasicInfo from './tabs/basic-info/index.vue';
import MechanismInfo from './tabs/mechanism-info/index.vue';
import FundInfo from './tabs/fund-info/index.vue';
import LpInfo from './tabs/lp-info/index.vue';
import OtherInfo from './tabs/other-info/index.vue';
import BasicInfoService from '../../../service/subject/company/basic-info/index';
import StatusBtn from '../../../components/detail-state-btn/index.vue';
import { StateMessage } from '../../../service/common/interface';
@Component({
  components: {
    StatusBtn, // 状态按钮
    BasicInfo, // 基本信息
    MechanismInfo, // 机构信息
    FundInfo, // 基金信息
    LpInfo, // LP信息
    OtherInfo, // 其他信息
  }
})
export default class CompanyDetail extends Vue {
  // 初始化数据 相当于data
  // public msg: number = 123;
  public tabIndex: string = '0';
  public infoStatus: string = '0000';
  public messsage: string = '';
  public disAttr: boolean[] = [false, true, true, true, true];
  public basicBool: boolean;
  // refs
  public $refs: {
    basicInfo: HTMLFormElement,
    OrgInfo: HTMLFormElement,
    lpInfo: HTMLFormElement,
    fundInfo: HTMLFormElement,
  };

  // watch
  @Watch('tabIndex')
  public onChildChanged(val: string, oldVal: string) {
    // 保存之前tab的信息
    if (Number(val) !== Number(oldVal)) {
      // 基本信息
      if (Number(oldVal) === 0) {
        this.$refs.basicInfo.save(this.infoStatus, this.messsage, false, 1);
      }
      // 机构信息
      if (Number(oldVal) === 2) {
        this.$refs.OrgInfo.save(false);
      }
      // lp信息
      if (Number(oldVal) === 3) {
        this.$refs.lpInfo.save(false);
      }
      // 基金信息
      if (Number(oldVal) === 4) {
        this.$refs.fundInfo.saveFundInfo(false);
      }
    }
  }

  // 声明周期钩子
  public mounted() {
    if (this.$route.params.itemId === '-1') {
      this.disAttr = [false, true, true, true, true];
      // this.getIdentification();
    }
    if (this.$route.params.itemId !== '-1') {
      this.$refs.basicInfo.getBasicInfo(Number(this.$route.params.itemId));
    }
    if (this.$route.params.tabIndex) {
      this.tabIndex = this.$route.params.tabIndex;
    }
  }

  // 方法
  // 基本信息-tab
  public pass(bool: boolean) {
    this.basicBool = bool;
    // 验证通过
    if (this.tabIndex === '0') {
      if (bool) {
        this.getIdentification();
        // 验证不通过
      } else {
        this.disAttr = [false, true, true, true, true];
      }
    }
  }
  // 基本信息身份标识控制tab
  public tabCon(list: string[]) {
    if (this.basicBool) {
      this.disAttr = [false];
      if (list.indexOf('机构属性') >= 0) {
        this.disAttr[2] = false;
      } else {
        this.disAttr[2] = true;
      }
      if (list.indexOf('基金属性') >= 0) {
        this.disAttr[4] = false;
      } else {
        this.disAttr[4] = true;
      }
      if (list.indexOf('LP属性') >= 0) {
        this.disAttr[3] = false;
      } else {
        this.disAttr[3] = true;
      }
    }
  }
  // 机构属性-tab
  public OrgValidate(bool: boolean) {
    if (this.$route.params.itemId !== '-1' && this.tabIndex === '2') {
      if (!bool) {
        this.disAttr = [true, true, false, true, true];
      } else {
        this.getIdentification();
      }
    }
  }
  // lp属性-tab
  public lpTest(bool: boolean) {
    if (this.$route.params.itemId !== '-1' && this.tabIndex === '3') {
      if (!bool) {
        this.disAttr = [true, true, true, false, true];
      } else {
        this.getIdentification();
      }
    }
  }
  // 基金属性-tab
  public fundTest(bool: boolean) {
    if (this.$route.params.itemId !== '-1' && this.tabIndex === '4') {
      if (!bool) {
        this.disAttr = [true, true, true, true, false];
      } else {
        this.getIdentification();
      }
    }
  }
  // 获取身份标识
  public async getIdentification() {
    const res = await BasicInfoService.getCompanyById(Number(this.$route.params.itemId));
    this.infoStatus = res.data.infoStatus;
    this.messsage = res.data.publishMessage;
    this.disAttr = [false];
    if (res.resCode === '0') {
      this.infoStatus = res.data.infoStatus;
      if (this.$route.params.itemId !== '-1') {
        this.disAttr[1] = false;
      } else {
        this.disAttr[1] = true;
      }
      if (res.data.orgAttr === 1) { // 机构属性
        this.disAttr[2] = false;
      } else {
        this.disAttr[2] = true;
      }
      if (res.data.lpAttr === 1) { // lp属性
        this.disAttr[3] = false;
      } else {
        this.disAttr[3] = true;
      }
      if (res.data.fundAttr === 1) { //基金属性
        this.disAttr[4] = false;
      } else {
        this.disAttr[4] = true;
      }
    }
  }
  // 关闭
  public close() {
    this.$router.go(-1);
  }
  // 切换tab
  public handleClick(tabIndex: string) {
    this.tabIndex = tabIndex;
    if (this.tabIndex.toString() === '0') { // 基本
      this.$refs.basicInfo.getBasicInfo(Number(this.$route.params.itemId));
    }
    if (this.tabIndex.toString() === '2') { // 机构
      this.$refs.OrgInfo.getOrgInfo();
    }
    if (this.tabIndex.toString() === '3') { // lp
      this.$refs.lpInfo.getLPInfo();
    }
    if (this.tabIndex.toString() === '4') { // 基金
      this.$refs.fundInfo.getFund();
    }
  }
  public setState(state: StateMessage) {
    this.$refs.basicInfo.save(state.infoStatus, state.publishMessage, true);
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main-box {
    position: relative;
}

.main-box .right-btn {
    position: absolute;
    right: 20px;
    top: 0;
    line-height: 55px;
}
.right-btn .left-btn {
    display: inline-block;
    margin-right: 5px;
}
</style>
